<template>
  <div>
    <!-- set 相关 key 操作 -->
    <el-row class="">
      <el-col :span="14">
        <el-input v-model="input.otherKeys" placeholder="另外的 KEY,多个用逗号分隔 " size="small" class="margin-bottom"/>
      </el-col>
      <el-col :span="10">
        <el-button-group >
          <el-button :disabled="!!!input.otherKeys" @click="collectionOperation('inter')" type="plain" size="small" >交集</el-button>
          <el-button :disabled="!!!input.otherKeys" @click="collectionOperation('union')" type="plain" size="small">并集</el-button>
          <el-button :disabled="!!!input.otherKeys" @click="collectionOperation('diff')" type="plain" size="small">差集</el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <!-- set 数据搜索-->
    <el-row >
      <el-col :span="11">
        <el-input :disabled="all" suffix-icon="el-icon-search" placeholder="搜索 " v-model="input.keyScanParam.pattern"
                  @keyup.enter.native="loadDataRequest" size="mini"/>
      </el-col>
      <el-col :span="10">
        <el-button-group>
          <el-button :disabled="all" plain size="mini" icon="el-icon-coordinate" @click="resetScanSetOrZSetKey">重置</el-button>
          <el-button  plain size="mini" :disabled="scanResult.finish || all" icon="el-icon-arrow-right" @click="scanSetKeyNextPage">下一页</el-button>
        </el-button-group>

      </el-col>
    </el-row>

    <!-- 数据展示 -->
    <p v-if="data" v-for="item in data">{{item}}</p>
  </div>
</template>

<script>
import redis from "@/api/redis";

export default {
  name: "set",
  props: {
    keyObj: {
      type: Object,
      required: true
    },
    connParam:{
      type: Object,
      required: true
    },
    serializerParam: {
      type: Object,
      required: true
    },
    all: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      input: {
        otherKeys: null,
        keyScanParam: {
          pattern: '*',
          limit: 20,
          cursor: 0
        },
      },
      scanResult: {
        cursor: 0,
      },
      data: null
    }
  },
  methods: {
    getData(){
      return this.data;
    },
    loadData(){
      this.loadDataRequest();
    },
    loadDataRequest(){
      redis.readData(this.connParam,this.keyObj.key,this.serializerParam,
        this.all,this.input.keyScanParam,null,null).then(res => {
        // this.data = res.data;
        this.scanResult = res.data;
        this.data = res.data.members;
      })
    },
    collectionOperation(op){
      let otherKeys = this.input.otherKeys.split(',');
      let keys = [...otherKeys,this.keyObj.key].join(',');
      redis.collectionMethods(this.connParam,keys,op,this.serializerParam).then(res => {
        this.data = res.data;
      })
    },
    resetScanSetOrZSetKey(){
      Object.assign(this.input.keyScanParam,{pattern:'*',cursor:'0',limit:20})
      this.loadDataRequest();
    },
    scanSetKeyNextPage(){
      this.input.keyScanParam.cursor = this.scanResult.cursor;
      this.loadDataRequest();
    }
  }
}
</script>

<style scoped>

</style>
